<template>
  <div class="left-menu">
    <div class="top-bar" @click="isCollapseBtn">|||</div>

    <el-menu
      class="el-menu-vertical-demo"
      background-color="#333744"
      text-color="#fff"
      active-text-color="#409eff"
      :unique-opened="true"
      :collapse="isCollapse"
      :collapse-transition="false"
      router
      :default-active="getMenuActive"
    >
      <el-submenu v-for="item in menusList" :key="item.id" :index="item.path">
        <template slot="title">
          <i :class="item.path | iconFilt"></i>
          <span>{{item.authName}}</span>
        </template>
        <el-menu-item v-for="item2 in item.children" :key="item2.id" :index="'/'+item2.path" @click="getMenuItem(item,item2)"
          ><i class="el-icon-menu"></i>
          {{item2.authName}}
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { getMenus } from "@/api/index";
import {mapGetters} from 'vuex';
export default {
  data() {
    return {
      isCollapse: false,
      menusList: [],
    };
  },
  created() {
    this.getMenusData();
  },
  methods: {
    async getMenusData() {
      let {
        data,
        meta: { msg, status },
      } = await getMenus();
      if (status != 200) return this.$message.error(msg);
      this.menusList = data;
    },
    isCollapseBtn() {
      this.isCollapse = !this.isCollapse;
      this.$emit("outCollapse", this.isCollapse);
    },
    getMenuItem(val1,val2){
      this.$store.commit('setMenuObj',{val1:val1.authName,val2:val2.authName});
      this.$store.commit('setMenuActive',val1.path)
    }
  },
  computed: {
    ...mapGetters(['getMenuActive'])
  },
  filters: {
    iconFilt(path){
      if(path == 'users') return 'el-icon-user-solid '
      if(path == 'rights') return 'el-icon-s-check'
      if(path == 'goods') return 'el-icon-s-goods'
      if(path == 'orders') return 'el-icon-s-claim'
      if(path == 'reports') return 'el-icon-s-marketing'
      return 'el-icon-user-solid '
    }
  }
};
</script>

<style lang="less" scoped>
.left-menu {
  height: 100%;
  .top-bar {
    height: 24px;
    line-height: 24px;
    text-align: center;
    color: #fff;
    font-size: 12px;
    background-color: #4a5064;
    letter-spacing: 0.1em;
    cursor: pointer;
  }
  .el-menu {
    border: none;
    box-sizing: border-box;
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
  }
}
</style>